import React, { Component } from 'react';
import QueueAnim from 'rc-queue-anim';
import classnames from 'classnames';
import { toJS } from 'mobx';
import { Link, withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { Flex, Tools, Icon, List } from 'weaver-mobile';
import { renderNoData, renderLoading } from '../../util';
import RouteModal from './RouteModal';

const getLabel = Tools.getLabel;

@withRouter
@inject('votingStore')
@observer
export default class Voting extends Component {
  static defaultProps = {
    prefixCls: 'voting-container'
  }

  constructor(props) {
    super(props);
    this.state = {
      title: '',
    }
  }
  
  componentDidMount() {
    const { votingStore: {getList, getNewResult, myVotingNum} } = this.props;
    getList();
    getNewResult();
    myVotingNum();
  }

  componentWillReceiveProps(nextProps) {
    const { location: { pathname }, votingStore: {getList, getNewResult, myVotingNum} } = this.props; 
    let rule_1 = pathname.indexOf('/voting/fill')>-1 && nextProps.location.pathname === '/voting';
    let rule_2 = pathname.indexOf('/fill')>-1 && nextProps.match.path === '/voting';
    if (rule_1 || rule_2) {
      getList();
      getNewResult();
      myVotingNum();
    }
  }

  renderRow = (data) => {
    const curCls = 'voting-template-pic';
    const {subjectspan, createridspan, begindatespan, countidspan, picidspan, countDownTimespan } = data;
    const timeCls = classnames({
      [`${curCls}-content-time`]: true,
      isEnglish: window.e9_locale.userLanguage === 8
    })
    const newTemp = (
      <List.Item key={data.id} onClick={() => this.props.history.push(`/voting/fill/${data.id}`)}>
        <div className={curCls}>
          <div className={`${curCls}-img`} /* style={{ background:`url(${picidspan}) no-repeat center center`}} */>
            {picidspan !== '' ? <img src={picidspan} alt=''/> : <Icon type='investigation'/>}
          </div>
          <div className={`${curCls}-content`}>
            <div className={`${curCls}-content-box`}>
              <div className={`${curCls}-content-title`}>
                {subjectspan}
              </div>
              <div className={`${curCls}-content-info`}>
                <span className='creater'>{createridspan}</span>{begindatespan}
              </div>
            </div>
            <div className={timeCls}>
              {
                countDownTimespan && (
                  <div className='time'>
                    <Icon type='hourglass' size='xxs'/>{countDownTimespan}
                  </div>
                )
              }
              <div className='statistics'>
                {countidspan}{getLabel('126116', '人已参与')}
              </div>
            </div>
          </div>
        </div>
      </List.Item>
    );
    return newTemp;
  }

  renderResRow = (data) => {
    const curCls = 'voting-template';
    const {subjectspan, createridspan, begindatespan, enddate, endtime, countidspan, statusspan, status } = data;
    const stateAstyle = status === '1' && {borderColor: '#55B1F9', color: '#55B1F9'};
    const stateBstyle = status === '2' && {borderColor: '#868686', color: '#868686'};
    const stateStyle = stateAstyle || stateBstyle;
    const newTemp = (
      <List.Item 
        key={data.id} 
        onClick={() => {
          this.setState({title: data.subject}, () => {
            this.props.history.push(`/voting/result/${data.id}`)
          })
        }}
      >
        <div className={curCls}>
          <div className={`${curCls}-title`}>
            <span className='name'>{subjectspan}</span>
            <span className='num'>({countidspan}{getLabel('126116', '人已参与')})</span>
          </div>
          <div className={`${curCls}-name`}>{createridspan}</div>
          <div className={`${curCls}-info`}>
            <div className='time'>{begindatespan}{getLabel('15322', '至')}{enddate === '' ? getLabel('505515','无限期') : `${enddate} ${endtime}`}</div>
            <div className={`${curCls}-info-state`} style={stateStyle}>{statusspan}</div>
          </div>
        </div>
      </List.Item>
    );
    return newTemp;
  }

  render() {
    const { prefixCls, history, votingStore } = this.props;
    const { votingResList, noJoinList, votingNum, resultLoading, noJoinLoading } = votingStore;
    let noJoinDatas = toJS(noJoinList.data);
    let newResDatas = toJS(votingResList.data);
    let relatedNum = votingNum && toJS(votingNum).related;
    let numArr = [
      {
        id: 'unjoin',
        name: getLabel('505511','未参与的'),
        num: votingNum && toJS(votingNum).unjoin,
        route: '/voting/noparticipating',
        color: '#E26A6A',
        dotStyle: {backgroundImage: 'linear-gradient(71deg, #FF2C2C 3%, #FFA0A0 100%)'},
        onClick: () => history.push('/voting/noparticipating')
      },
      {
        id: 'create',
        name: getLabel('505512','我发起的'),
        num: votingNum && toJS(votingNum).create,
        route: '/voting/call',
        color: '#4AA0FF',
        dotStyle: {backgroundImage: 'linear-gradient(71deg, #3DACF4 3%, #74BAFF 100%)'},
        onClick: () => history.push('/voting/call')
      },
      {
        id: 'join',
        name: getLabel('83231','我参与的'),
        num: votingNum && toJS(votingNum).join,
        route: '/voting/join',
        color: '#50B770',
        dotStyle: {backgroundImage: 'linear-gradient(71deg, #51B771 3%, #6DFF9B 100%)'},
        onClick: () => history.push('/voting/join')
      },
    ]
    return (
      <QueueAnim className={prefixCls}>
        <div className={`${prefixCls}-related`} key='home'>
          <Flex className={`${prefixCls}-related-title`} justify='between'>
            <Flex.Item className='name'>{getLabel('505389','与我相关的调查')}</Flex.Item>
            <Flex.Item className='num' align='end'><Link to='/voting/relatedme'><strong>{relatedNum || 0}</strong>{getLabel('27591', '个')}</Link></Flex.Item>
          </Flex>
          <Flex className={`${prefixCls}-related-category`}>
            {
              numArr.map(item => {
                return (
                  <Flex.Item key={item.id} onClick={item.onClick}>
                    <div className='num' style={{color: item.color}}>{item.num || 0}</div>
                    <div className='name'><i style={item.dotStyle}/>{item.name || 0}</div>
                  </Flex.Item>
                )
              })
            }
          </Flex>
        </div>

        <div className={`${prefixCls}-nojoin`}>
          <div className={`${prefixCls}-nojoin-title`}>{getLabel('505513','需要您填写的调查')}</div>
          <div className={`${prefixCls}-nojoin-list`}>
            {
              noJoinLoading ? renderLoading : noJoinDatas.length === 0 ? renderNoData() : (
                <List
                  renderFooter={() => (
                    <span className={`${prefixCls}-nojoin-more`}><Link to='/voting/noparticipating'>{getLabel('17499','更多')}</Link></span>
                  )}
                >
                  {toJS(noJoinList.data).slice(0,5).map(row => this.renderRow(row))}
                </List>
              )
            }
          </div>
        </div>

        <div className={`${prefixCls}-result`}>
          <div className={`${prefixCls}-result-title`}>{getLabel('505514','最新调查结果')}</div>
          <div className={`${prefixCls}-result-list`}>
          {
            resultLoading ? renderLoading : newResDatas.length === 0 ? renderNoData() : (
              <List
                renderFooter={() => (
                  <span className={`${prefixCls}-nojoin-more`}><Link to='/voting/resultList'>{getLabel('17499','更多')}</Link></span>
                )}
              >
                {toJS(votingResList.data).slice(0,5).map(row => this.renderResRow(row))}
              </List>
            )
          }
          </div>
        </div>
        <RouteModal title={this.state.title}/>
      </QueueAnim>
    )
  }
}